<template>
  <div class="channel">
    <!-- 导航栏 -->
    <!-- <van-nav-bar
      :title="parentCategory.name"
      left-text="返回"
      left-arrow
      @click-left="onClickLeft"
    /> -->
    <public :title="str" :changeColor="changeColor" class="nb"></public>
    <div class="heightbox"></div>
    <!-- 标签栏 -->
    <van-tabs @change="onChange" v-model="active">
      <van-tab
        v-for="item in cateDetailList"
        :title="item.name"
        :key="item.id"
        :name="item.id"
      >
        <cate-desc :obj="cateInfo"></cate-desc>
      </van-tab>
    </van-tabs>
    <!-- 商品 -->
    <div class="wrap">
      <product-show
        class="item"
        :obj="item"
        v-for="item in goodsList"
        :key="item.id"
      ></product-show>
    </div>
  </div>
</template>

<script>
import Public from '@/components/public/Public'
import { cateDetailData, GetSearchProduct } from "@/request/api"
import CateDesc from "./children/CateDesc"
import ProductShow from "@/components/ProductShow"
export default {
  components: {
    CateDesc,
    ProductShow,
    Public
  },
  data() {
    return {
      changeColor : '',
      // 当前分类id,
      cateIdx: null,
      // 标签栏活跃状态
      active: 0,
      // 当前分类信息
      cateInfo: {},
      // 二级分类标题数据
      cateDetailList: [],
      // 商品数组
      goodsList: [],
      // 父分类
      parentCategory: {},
      str : ''
    }
  },
  methods: {
    // 返回上一级
    onClickLeft() {
      this.$router.push("/classify")
    },

    // tab改变时触发
    onChange(id,name) {
      console.log(id);
      // 16进制颜色
      var colorstr = '#';
      var arr = ["0","1","2","3","4","5","6","7","8","9","a","b","c","d","e","f"]
      for(var i = 0; i< 6; i++) {
          var num = parseInt(Math.random() * 16);
          colorstr += arr[num]
      }
      // console.log(colorstr);
      this.changeColor = colorstr
      this.str = name
      this.active = id
      this.cateIdx = id
      this.$route.params.id = id
      this.cateInfo = this.cateDetailList.filter((v) => v.id == id)[0]
      this.getGoodsData()
    },
    // 获取商品数据
    async getGoodsData() {
      const { data: res } = await GetSearchProduct({
        categoryId: this.cateIdx,
      })
      // console.log(res)
      this.goodsList = res.data
    },

    // 获取二级分类数据
    async getSecCateData() {
      const { data: res } = await cateDetailData({
        id: this.cateIdx,
      })
      console.log(res)
      this.str = res.currentCategory.name
      this.cateDetailList = res.brotherCategory
      this.cateInfo = res.currentCategory
      this.cateIdx = res.currentCategory.id
      this.active = res.currentCategory.id
      this.parentCategory = res.parentCategory
    },
  },
  created() {
    this.cateIdx = this.$route.params.id
    this.getSecCateData()
    this.getGoodsData()
  },
}
</script>

<style lang="less" scoped>
.nb {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  background-color: #fff;
  z-index: 1;
  border-bottom: 1px solid #b19f7b;
}
.heightbox {
  height: 46px;
}
.channel {
  background-color: #efefef;
  /deep/.van-nav-bar__text {
    color: #000;
  }
  .wrap {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    .item {
      width: 49%;
    }
  }
}
</style>
